<template>
  <div
    class="articleList-container"
    ref="articleListRef"
  >
    <!-- 下拉刷新模块 -->
    <van-pull-refresh
      v-model="isLoading"
      :success-text="successText"
      :success-duration="1500"
      @refresh="onRefresh"
    >
      <!-- List组件模块  注意一定要写在下拉刷新里面-->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >
        <articleitem
          v-for="(item,index) in list"
          :key="index"
          :data="item"
        ></articleitem>
      </van-list>
      <!-- <p>刷新次数: {{ count }}</p> -->
    </van-pull-refresh>

    <!-- ------------------------------- -->
  </div>
</template>

<script>
// 导入获取所有文章列表的模块
import { getArticleList } from '../../../api/user.js'
// 导入文章列表项模块
import articleItem from '../../../components/article-item/index.vue'
// 缓存的时候,优化页面滚动的防抖操作
import { debounce } from 'lodash'
export default {
  // 组件名称
  name: 'articleList',
  // 局部注册的组件
  components: {
    articleitem: articleItem
  },
  // 组件参数 接收来自父组件的数据
  props: {
    // 接收父组件传递过来的值,注意这个地方可以是对象 data里面携带每个频道列表的id值
    data: { // 这里面是对接收过来值的条件要求
      type: Object, // 必须是一个对象
      required: true
    }
  },
  // 组件状态值
  data () {
    return {
      list: [], // 存储列表数据的数组
      loading: false, // 控制加载中 loading 状态
      finished: false, // 控制数据加载结束的状态
      timestamp: null, // 请求下一页数据的时间戳
      error: false, // 错误的提示 是否加载失败!
      // 下拉刷新的相关数据值
      count: 0,
      isLoading: false,
      // 刷新成功后的提示信息
      successText: '',
      articleListOncrollTop: 0// 定义列表滚动的高度
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
  },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () {
    // 当页面加载的时候监听列表元素的滚动事件，把列表的滚动高度记录下来
    const articleList = this.$refs.articleListRef
    // 监听文章列表的滚动事件

    articleList.onscroll = debounce(() => {
      console.log(articleList.scrollTop)
      // 记录页面滚动的高度, 把值赋值给scrollTop
      this.articleListOncrollTop = articleList.scrollTop
    }, 100)
  },
  // 然后在切换到缓存的组件时，在activated钩子函数中把高度设置为保存的高度  这个钩子函数是当缓存激活的时候触发
  activated () {
    // 这个钩子函数触发后,也就是切换到缓存页面后,把记录的高度给缓存页面
    this.$refs.articleListRef.scrollTop = this.articleListOncrollTop
  },
  // 组件方法
  methods: {
    // list的滚动触发函数模块
    async onLoad () {
      try {
        // 1. 异步更新数据 ,调用获取所有文章列表的接口
        const { data } = await getArticleList({
          channel_id: this.data.id,
          timestamp: this.timestamp || Date.now(), // 如果是第一次请求,则返回最新的一页
          with_top: 1
        })

        // 模拟随机失败的情况
        // if (Math.random() > 0.5) {
        //   JSON.parse('dsnajndjsa')
        // }

        // 完成赋值的操作 把每次获取的数据 逐一追加到List数组里面
        this.list.push(...data.data.results)
        console.log(this.list)
        // 2.// 加载状态结束 必须关掉转圈圈
        this.loading = false
        // 3.判断数据是否加载结束
        if (data.data.results.length) {
          this.timestamp = data.data.pre_timestamp
        } else {
          this.finished = true
        }
      } catch (error) {
        console.log('请求错误!', error)
        this.loading = false // 关闭 loading 效果
        this.error = true // 开启错误提示
      }
    },
    // 下拉刷新的相关处理函数
    onRefresh: async function () {
      // 在这里获取最新的文章列表 注意那个时间戳要使用date.now()
      try {
        //  调接口
        const { data } = await getArticleList({
          channel_id: this.data.id,
          timestamp: Date.now(), // 如果是第一次请求,则返回最新的一页
          with_top: 1
        })
        console.log(data.data.results)
        // 把拿到的数据依然追加到List数组里面,此处注意的是,要从前面追加
        this.list.unshift(...data.data.results)
        //  追加完毕数据后,在关闭下拉刷新的状态
        this.isLoading = false
        // 刷新成功后的自定义提示消息
        this.successText = `刷新成功!获取了${data.data.results.length}条数据!`
      } catch (error) {
        console.log('获取失败', error)
        this.successText = '刷新失败!请稍后再试!'
        // 同时关闭下拉刷新的状态
        this.isLoading = false
      }
    }

  }
}
</script>

<style scoped lang="less">
.articleList-container {
  height: 79vh;
  overflow-y: auto;
}
</style>
